<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		#u1 li {
            margin-bottom: 10px;
            background-color: Orange;
            font-size: 20px;
            font-weight: bolder;
            cursor: pointer;
        }
        #u1 li ul {
            list-style-type: none;
            margin: 0;
            padding: 0;

        }

        #u1 li ul li {
            background-color: pink;
        }
	</style>
	<script type="text/javascript" src="jquery-3.4.1.js"></script>
	<script type="text/javascript">
		$(function () {
            //让li中的ul中的li隐藏
            $("#u1>li>ul>li").hide();
            //先获取u1中所有的直接的li,注册点击事件
            $("#u1>li").click(function () {
                //让当前被点击的li的兄弟元素li中的ul中的li都隐藏
                $(this).siblings("li").children("ul").find("li").hide(500);
                $(this).children("ul").find("li").show(500);
            });
        });
	</script>
</head>
<body>
	<div style=" width:200px; height:500px; border:1px solid red;">
	    <ul id="u1" style=" list-style-type:none; margin:0; padding:0; text-align:center;">
	        <li>
	            幼儿园同学
	            <ul>
	                <li>鼻涕虫</li>
	                <li>爱哭鬼</li>
	                <li>张大胆</li>
	            </ul>
	        </li>
	        <li>小学同学
	            <ul>
	                <li>张三丰</li>
	                <li>张无忌</li>
	                <li>乔布斯</li>
	            </ul>
	        </li>
	        <li>
	            初中同学
	            <ul>
	                <li>盖茨</li>
	                <li>川普</li>
	                <li>奥巴马</li>
	            </ul>
	        </li>
	    </ul>
	</div>
</body>
</html>